export const sizeLegend = (selection, props ) => {
  //ES6 变量解构与赋值
  const { sizeScale, spacing, textOffset, numTicks} = props;

  const ticks = sizeScale.ticks(numTicks).filter(d => d != 0).reverse();
  
  const groups = selection.selectAll('g').data(ticks);
  
  //提取公共代码部分声明为常量
  const groupsEnter = groups.enter().append('g');
  
  groupsEnter
    .merge(groups)//merge合并update操作
      .attr('transform', (d, i) => 
        //使用translate调整groups对象即<g>元素中的x y 偏移量
        //(因为text 和 circle的属性分别是x,y 和 cx,cy)
        `translate(100, ${i * spacing})`
      );
  
  groups.exit().remove();
  
  const circles = groups.select('circle');
  
  
  groupsEnter
    .append('circle')//在分组中添加圆,x,y已经有transform属性设置
    .merge(circles)
      .attr('fill', 'rgba(0,0,0,0.5)')//填充色
      .attr('stroke-width',  5)
      .attr('r', d => sizeScale(d)/2);
  
  /*同样的方法添加文本*/
  const text = groups.select('text');
  groupsEnter
    .append('text')
      //.attr('text-anchor', 'middle')//设置文本居中
      .attr('font-size', 20)//字体
      //.attr('y', textOffset)//y轴偏移量
    .merge(text)
      .text(d => d)
      .attr('dy', '0.32em')
      .attr('x', d => sizeScale(d) + textOffset);

}